<template>
   <div class="competition">
    <div class="title">
      <p class="big-title">卓越赛事</p>
      <p class="en-title">荣誉只是过去，挑战永不停息</p>
    </div>

    <div class="content ">
        <div class="tab_list">
            <ul >

                <li :class="{current:isShow[0]}" @click="show(0)"><span>互联网+</span></li>
                <li :class="{current:isShow[1]}" @click="show(1)"><span>校企合作</span></li>
                <li :class="{current:isShow[2]}" @click="show(2)"><span>电赛</span></li>

            </ul>
        </div>

        <div class="tab_con">

            <div class="list" v-show="isShow[0]">
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393705065435449.png" alt="">
                    </div>
                    <h3 class="name">智能仓储物流小车</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p>参与组员：曹世龙、徐日升、郭星宇、武明侠、张毓、张泽凡、李毅衡</p>
                        <p>项目介绍：智能仓储物流小车</p>
                    </div>
                </div>
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393705957953401.png" alt="">
                    </div>
                    <h3 class="name">公交车实时定位系统</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p> 参与组员：王雅泽、张子恒、王子妍、郑文杰、王宇瑶、曹世龙、张毓
                        </p>
                        <p>项目介绍：公交车实时定位系统</p>
                    </div>
                </div>
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393706707606044.png" alt="">
                    </div>
                    <h3 class="name">追光者-太阳能追踪器</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p>
                            参与组员：徐日升、郭星宇、黄朝、于志强、武明侠、王彤瑶、张毓
                        </p>
                        <p>项目介绍：追光者-太阳能追踪器</p>
                    </div>

                </div>
            </div>
            <div class="list" v-show="isShow[1]">
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393706707606044.png" alt="">
                    </div>
                    <h3  class="name">迭代一</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p>参与组员：王雅泽、张子恒、王子妍、郑文杰、王宇瑶、曹世龙、张毓</p>
                        <p>项目介绍：垃圾分拣系统</p>
                    </div>
                </div>
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393705957953401.png" alt="">
                    </div>
                    <h3  class="name">迭代二</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p> 参与组员：李妍、鲁兆楠、李佳豪、徐日升、郭星宇、黄朝、于志强、武明侠
                        </p>
                        <p>项目介绍：水果分拣系统</p>
                    </div>
                </div>
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393706201953971.png" alt="">
                    </div>
                    <h3  class="name">迭代三</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p>
                            参与组员：马珂 张朗云 李云 李梅芝 郭闯 何根 赵伟强
                        </p>
                        <p>项目介绍：小柚智汇</p>
                    </div>

                </div>
            </div>
            <div class="list" v-show="isShow[2]">
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393706201953971.png" alt="">
                    </div>
                    <h3 class="name">悬挂控制系统</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p>参与组员：王雅泽、张子恒、王子妍、郑文杰、王宇瑶、曹世龙、张毓</p>
                        <p>项目介绍：悬挂控制系统</p>
                    </div>
                </div>
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393706916083436.png" alt="">
                    </div>
                    <h3 class="name">基于stm32的温度检测装置</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p> 参与组员：鲁兆楠、李佳豪、徐日升、郭星宇、黄朝、于志强、武明侠
                        </p>
                        <p>项目介绍：基于stm32的温度检测装置</p>
                    </div>
                </div>
                <div class="card">
                    <div class="imgBx">
                        <img src="http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/12/13/16393706422479363.png" alt="">
                    </div>
                    <h3 class="name">基于机器学习的水瓶分拣装置</h3>
                    <div class="content1">
                        <p class="line">▁▁▁▁▁▁▁</p>
                        <p>
                            参与组员：王雅泽、张子恒、王子妍、郑文杰、王宇瑶、曹世龙、张毓
                        </p>
                        <p>项目介绍：基于机器学习的水瓶分拣装置</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {},
  components: {},
  data () {
    return {
      activeNames: ['1'],
      image: [],
      isShow: [true, false, false]
    }
  },
  methods: {
    show (index) {
      this.isShow = [false, false, false];
      this.isShow[index] = true
    }
  }
}
</script>

<style lang="less" scoped>
  .competition{
    margin-top: 85px;
    background: url('https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/assets/image/shiguang.png?versionId=CAEQGBiBgICq3PyZ5hciIDkwNzNmNGFlOTcyNjRhODg4OWI1ZDU3ZjE1ZmM5Mzhk') no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
  .title{
    position: relative;
    p{
      text-align: center;
    }
    .big-title{
      font-size: 34px;
      margin-bottom: 10px;
      position: relative;
    .en-title{
      margin-top: 0;
    }
  }
  .big-title::before,.big-title::after{
        content: '';
        display: inline-block;
        width: 20px;
        height: 1px;
        background-color: #000;
        position: absolute;
        top: 20px;

      }
    .big-title::before{
      left: 50%;
      transform: translate(-102px, 0);
    }
    .big-title::after{
        right: 50%;
        transform: translate(102px, 0);
      }
    }

.content {
    display: flex;
    /* float: left; */
    justify-content: center;
    align-items: center;
}
.list {
    position: relative;
    height: 538px;
    width: 100%;
    /* display: block; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px;
    flex-direction: row;
    left: -1%;
}
.list .card {
    margin-top: 100px;
    position: relative;
    width: 260px;
    height: 200px;
    background:  #fcefc6;
    margin: 105px 20px;
    padding: 20px 15px;
    display: block;
    flex-direction: column;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .3);
    transition: .3s ease-in-out;
    float: left;
    border-radius: 5px;
    /* border: 5px solid rgb(231,232,235); */
}

.list .card:hover {
    height: 350px;
    margin: 1px 20px;
}

.list .card .imgBx {
    position: absolute;
    width: 240px;
    // height: 160px;
    left: 50%;
    transform: translate(-50%, -40px);
    z-index: 1;
    // box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.list .card .imgBx img {
    // max-width: 240px;
    width: 240px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    /* margin-left: -20px; */
}

.list .card .content1 {
    position: relative;
    margin-top: -140px;
    padding: 10px 15px;
    text-align: left;
    color: #111;
    visibility: hidden;
    opacity: 0;
    top: 150px;
    transition: .3s ease-in-out;
}

.list .card:hover .content1 {
    visibility: visible;
    opacity: 1;
    margin-top: -40px;
    transition-delay: .3s;
}
.content1 {
    height: 58%;
}

.line {
    color: #f69b24;
    margin-top: -10px;
}
.tab_list{
    height: 250px;
}

.tab_list ul{
    list-style: none;
    position: relative;
    top: -20%;
    justify-content: center;
}
.tab_list li{

    border:2px solid rgb(203,201,214);
    font-weight: bold;
    border-radius: 10px;
    margin-left: -10%;
    padding: 5px 10px;
    margin-top: 40px;
    width: 100%;
    box-shadow: 5px  5px 5px 0 rgba(0, 0, 0, .2);
    transition:transform 0.2s;
}
.tab_list li:hover{
    border-color: #f69b24;
    cursor: pointer;
    transform:translate(-5px,-5px);
}
.current{
    background-color: #f69b24;
}
.tab_con{
    height: 100%;
}
.name{
  position: relative;
  font-size: 25px;
  font-weight: 500;
  top:130px;
  color: #333333;
  text-align: center;
}
</style>
